<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>新建项目</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style type="text/css">
			.selectdiv{
				background-color: #FFFFFF;
				width:270px;
				height:120px;
				overflow:auto;
				-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
				border: 1px solid #CCCCCC;
				border-radius: 3px 3px 3px 3px;
				color: #555555;
				line-height: 18px;
				margin-bottom: 9px;
				padding: 4px;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			}
			
			.mybtn{
				 -moz-border-bottom-colors: none;
				-moz-border-image: none;
				-moz-border-left-colors: none;
				-moz-border-right-colors: none;
				-moz-border-top-colors: none;
				background-color: #F5F5F5;
				background-repeat: repeat-x;
				border-color: #CCCCCC #CCCCCC #B3B3B3;
				border-radius: 4px 4px 4px 4px;
				border-width: 1px;
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
				color: #333333;
				cursor: pointer;
				display: inline-block;
				width:80px;
				font-size: 13px;
				line-height: 18px;
				margin-bottom: 0;
				padding: 4px 10px;
				text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
				vertical-align: middle;
			}
		</style>
	</head>
	<body> 
	<%@ include file="include/topbar.jsp" %>
	
	<div class="container" style="margin-top: 60px" >
			<div class="row">
				
	
		<div class="span9" style="margin-left:120px">
		
        	 <ul class="breadcrumb" style="margin-bottom:0px;border-radius:3px 3px 0 0">		
				<li >
					<h4>新建项目</h4>
				</li>
			</ul>
				 <form class="form-horizontal wall" action="createpro.jspx" method="post" id="createproform" >
		          <div class="control-group">
		            <label for="input01" class="control-label">项目名称</label>
		            <div class="controls">
		              <input type="text" id="input01" class="input-xlarge" name="proname" />
		              <p class="help-block"></p>
		            </div>
		          </div>
		          <div class="control-group">
		            <label for="select01" class="control-label">负责人</label>
		            <div class="controls">
		            	<input type="hidden" name="leader" />
		              <select id="select01">
		              <option>请选择负责人</option>
		              <c:forEach var="employee" items="${emList}">
		              	<option>${employee.name}</option>
		              	</c:forEach>
			              </select>
			           		 </div>
			          	</div>
			         	 <div class="control-group">
			          		<label for="input02" class="control-label">成员</label>
			            	<div class="controls">
			              	<input type="text" id="input02" class="input-xlarge" value="" readonly="true" />
			              	<input type="hidden" name="member" />
			             	 <p class="help-block">请在下面选择成员</p>
			            	</div>
			            </div>
			            	<div class="control-group">
			            		<label class="control-label">选择成员</label>
			            		<div class="controls selectdiv">
			            		<c:forEach var="employee" items="${emList}">
			            				<c:set var="emname" value="${employee.name}" />
		            					<c:if test="${emname ne suppername}">
		         							<a class="mybtn" rel="${employee.id}">${emname}</a><i></i><br/>
		         						</c:if>
		            			</c:forEach>
		            			</div>
		          			</div>
					          <div class="control-group">
					            <label for="textarea" class="control-label">项目描述</label>
					            <div class="controls">
					              <textarea rows="3" id="textarea" class="input-xlarge" name="desc"></textarea>
					            </div>
					          </div>
					          <div style="padding-left:160px">
					            <a class="btn btn-primary" id="createpro">确认操作</a>
					            <a href="main.jspx" class="btn btn-danger">返回</a>
					          </div>
        
      				</form>
     				</fieldset>
	</div>
	</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$("#select01").change(function() {
				var id = $("input[name='leader']").val();
				
				if(id != "") {
					var num = $("input[name='leader']").val();
					$("a[rel="+ num + "]").css("display", "inline-block");
					getLeader(this);
				} else {
					getLeader(this);
				}
			});
			
			function getLeader(my) {
			var leader = $(my).val().trim();
			if($("a:contains('" + leader + "')").hasClass("btn-primary")) {
				var subStr = leader;
				var str = $("#input02").val();
				if(str.indexOf(",") != -1) {
					str = str.replace("," + subStr, "");
					if(str.indexOf(subStr) == 0) {
						str = str.replace(subStr + ",", "");
					}
				} else {
					str = str.replace(subStr, "");
				}
				$("#input02").val(str);
				
				var id = $("input[name='member']").val();
				var subId = $("a:contains(" + leader + ")").attr("rel");
				if(id.indexOf(",") != -1) {
					id = id.replace("," + subId, "");
					if(id.indexOf(subId) == 0) {
						id = id.replace(subId + ",", "");
					}
				} else {
					id = id.replace(subId, "");
				}
				$("input[name='member']").val(id);
				
				$("a:contains(" + leader + ")").removeClass("btn-primary");
				$("a:contains("+ leader +")+i").removeClass("icon-ok");
			}
			$("a:contains(" + leader + ")").css("display", "none");
			$("input[name='leader']").val($("a:contains(" + leader + ")").attr("rel"));
		}
		
		$(".mybtn").click(function() {
			if($(this).hasClass("btn-primary")) {
				var subStr = $(this).text();
				var str = $("#input02").val();
				if(str.indexOf(",") != -1) {
					str = str.replace("," + subStr, "");
					if(str.indexOf(subStr) == 0) {
						str = str.replace(subStr + ",", "");
					}
				} else {
					str = str.replace(subStr, "");
				}
				$("#input02").val(str);
				
				var id = $("input[name='member']").val();
				var subId = $(this).attr("rel");
				if(id.indexOf(",") != -1) {
					id = id.replace("," + subId, "");
					if(id.indexOf(subId) == 0) {
						id = id.replace(subId + ",", "");
					}
				} else {
					id = id.replace(subId, "");
				}
				$("input[name='member']").val(id);
				
				$(this).removeClass("btn-primary");
				$("a:contains("+ $(this).text() +")+i").removeClass("icon-ok");
			} else {
				var oldStr = $("#input02").val();
				if(oldStr == null || oldStr == "") {
					$("#input02").val($(this).text());
					
					$("input[name='member']").val($(this).attr("rel"));
				} else {
					oldStr = oldStr + "," + $(this).text();
					$("#input02").val(oldStr);
					var oldId = $("input[name='member']").val();
					oldId = oldId + "," + $(this).attr("rel");
					$("input[name='member']").val(oldId);
				}
				
				$(this).addClass("btn-primary");
				$("a:contains("+ $(this).text() +")+i").addClass("icon-ok");
			}
		});
		
		$("#createpro").click(function() {
			var proName = $("#input01").val();
			var member = $("input[name='member']").val();
			var leader = $("input[name='leader']").val();
			var desc = $("#textarea").val();
			
			if(proName.trim() == "" || member.trim() == "" || leader.trim() == "" || desc.trim() == "") {
				alert("不能为空");
			} else {
				$("#createproform").submit();
			}
		});
	});
		
	</script>
</body>
</html>